<template>
  <van-tabbar v-model="activeTab" style="z-index: 1999" class="tabbar-all">
    <van-tabbar-item
      v-for="(tab, index) in tabbar"
      :icon="tab.icon"
      :to="tab.path"
      :dot="tab.dot"
      :info="tab.info"
      :key="index">
      {{tab.name}}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'

export default {
  data () {
    return {
      tabbar: [
        {
          name: '首页',
          path: '/',
          pathName: 'home',
          icon: 'home-o',
          dot: false,
          info: ''
        },
        {
          name: '产品',
          path: '/products',
          pathName: 'products',
          icon: 'notes-o',
          dot: false,
          info: ''
        },
        {
          name: '购物车',
          path: '/cart',
          pathName: 'cart',
          icon: 'cart-o',
          dot: false,
          info: ''
        },
        {
          name: '我的',
          path: '/user',
          pathName: 'user',
          icon: 'friends-o',
          dot: false,
          info: ''
        }
      ]
    }
  },
  mounted () {
  },
  computed: {
    activeTab: {
      get () {
        return this.$store.state.tabbar.activeTab
      },
      set (value) {
        this.$store.commit('tabbar/setActiveTab', value)
      }
    }
  },
  methods: {
  },
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  }
}
</script>
<style scoped>
  .tabbar-all{
    max-width: 700px;
    /*position:absolute;*/
    /*top:0;*/
    bottom:0;
    left:0;
    right:0;
    margin:auto;
  }
</style>
